<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>功能实现</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<!-- JQuery操作动画
		                    show()   功能：显示效果   本质：display:block
							hide()    功能：隐藏效果   本质：display：none
							
							
							
						    slideDown()   功能：向下(滑动式)效果
							slideUp()   功能：向上(滑动式)效果
							
							
							fadeIn(毫秒数)   功能：淡入  本质：显示+透明度 0~1
							fadeOut(毫秒数)  功能：淡出  本质：隐藏+透明度 1~0
							-->
		<style>
			div{
				width: 500px;
				height: 500px;
				background: #ff0;
				display: block;
			}
		</style>
	</head>
	<body>
		<button id="show">显示按钮</button>
		<button id="hide">隐藏按钮</button>
		<button id="sd">滑动时向下按钮</button>
		<button id="su">滑动时向上按钮</button>
		<div></div>
		<script>
			/* JQ 动画：显示与隐藏 */ 
			$("#show").click(function(){
				
				$("div").show();
			});
			
			$("#hide").click(function(){
				
				$("div").hide();
			});
			
			//$("button").click(function(){
				//隐藏 css属性直接给元素设置
				//$("div").css("display","none");
			//});
		</script>
	</body>
</html>